<template>
    <div>
        <div class="p-col-12 p-md-12">
            <div class="card card-w-title">
                <h5>新建/编辑产品信息</h5>
                <p>步骤和TabMenu与相同的子路由集成在一起。</p>
                <Steps :model="items" :readonly="true" />
                <router-view/>
            </div>
        </div>

<!--        <router-view v-slot="{Component}" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">-->
<!--            <keep-alive>-->
<!--                <component :is="Component" />-->
<!--            </keep-alive>-->
<!--        </router-view>-->
        <StepsDoc  v-slot="{Component}" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete"></StepsDoc>
    </div>
</template>

<script>

    import StepsDoc from './basic';
    export default {
        data() {
            return {
                items: [{
                    label: '定义基础产品信息',
                    to: 'sale_edit/basic'
                },
                    {
                        label: '座位信息',
                        to: 'sale_edit/3'
                    },
                    {
                        label: '付款信息',
                        to: 'sale_edit/basic2'
                    },
                    {
                        label: '确认信息',
                        to: '/steps/confirmation'
                    }],
                formObject: {}
            }
        },
        components: {
            'StepsDoc': StepsDoc
        },
        methods: {
            nextPage(event) {
                console.log('1');
                for (let field in event.formData) {
                    this.formObject[field] = event.formData[field];
                }

                this.$router.push(this.items[event.pageIndex + 1].to);
            },
            test(event) {
                console.log('event:'+JSON.stringify(event));
            },
            prevPage(event) {
                this.$router.push(this.items[event.pageIndex - 1].to);
            },
            complete() {
                this.$toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.'});
            }
        }
    }

</script>

<style scoped lang="scss">
    /deep/ .stepsdemo-content  {
        padding: 1em 0;

        p {
            font-weight: 400;
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            margin: 0;
        }

        i {
            vertical-align: middle;
            font-size: 1.5em;
            margin: 0;
        }
    }

    .contextmenu-image {
        width: 100%;
    }
</style>